<template>
    <el-card class="card-container">
        <template #header>
            <div class="header">
                <span><strong>运动会报名统计</strong></span>
            </div>
        </template>
        <el-form>
            <el-form-item label="运动会" style="width: 300px;">
                <el-select v-model="id" class="m-2" placeholder="全部" @change="check">
                    <el-option v-for="item in select" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <el-form style="margin-left: 350px;">
            <el-form-item style="width: 800px;">
                <div ref="chartDom" style="width: 800px;height: 400px;">
                </div>
            </el-form-item>
        </el-form>

    </el-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import { statistic, getDataStatistic } from '@/api/adm/adm.js'
//创建运动会届数下拉列表相关参数
const select = ref([])
const id = ref(null)
const getList = async () => {
    let result = await statistic();
    select.value = result.data;
    id.value = select.value[0].id;
    console.log(id.value)
}
const total = ref(null);
const data = ref([]);
const check = () => {
    getData();
}
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
    },
    legend: {},
    xAxis: [
        {
            type: 'category',
            data: [

            ],
            axisLabel: {

                show: true,

                fontSize: 12, // 根据需要调整字体大小  

                interval: 0,// 设置为0以显示所有坐标点  
                formatter: function (params) {
                    var newParamsName = ''; // 拼接后的新字符串
                    var paramsNameNumber = params.length; // 实际标签数
                    var provideNumber = 3; // 每行显示的字数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回，算出要显示的行数

                    if (paramsNameNumber > provideNumber) {
                        /** 循环每一行,p表示行 */

                        for (var i = 0; i < rowNumber; i++) {
                            var tempStr = ''; // 每次截取的字符串
                            var start = i * provideNumber; // 截取位置开始
                            var end = start + provideNumber; // 截取位置结束

                            // 最后一行的需要单独处理

                            if (i == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + '\n';
                            }
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }

                    return newParamsName;
                }
                // rotate: '45'  偏斜45度
            },
            name: '\n\n\n项目名', // X 坐标轴名称
            nameLocation: 'end',
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '参数人数',
            min: 0,
            max: 15,
            position: 'left',
            axisLabel: {
                formatter: '{value}人'
            }
        },
        {
            type: 'value',
            name: '比率',
            min: 0,
            max: 100,
            position: 'right',
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
        {
            name: '参数人数',
            type: 'bar',
            yAxisIndex: 0,
            data: []
        },
        {
            name: '比率',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: []
        }
    ]
};
const getData = async () => {
    const model = {
        checkId: id?.value
    }
    console.log(model)
    let result = await getDataStatistic(model);
    total.value = result.data?.total
    data.value = result.data?.data
    option.xAxis[0].data = []
    option.series[0].data = []
    option.series[1].data = []
    for (let i = 0; i < data.value.length; i++) {
        const num = data?.value[i].num
        option.xAxis[0].data.push(data?.value[i].name)
        option.series[0].data.push(num)
        option.series[1].data.push((num / total.value * 100).toFixed(2))
    }
    chartInstance.setOption(option);
}

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
    
    getList().then(()=>{
         getData();
    })

    await nextTick(); // 确保DOM已经渲染完成
    chartInstance = echarts.init(chartDom.value);
    chartInstance.setOption(option);
});

// 销毁ECharts实例
onUnmounted(() => {
    if (chartInstance != null && chartInstance.dispose) {
        chartInstance.dispose();
    }
});
</script>
<style lang="scss" scoped>
.card-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>